<!-- 组织机构列表 移动、合并、启用、停用、删除等弹出框 -->
<template>
  <a-modal
    :width="type === 1 || type === 3 ? '60%' : '30%'"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    draggable
    title-align="center"
  >
    <template #title>
      <div v-if="type === 1">移动组织</div>
      <div v-else-if="type === 2">删除组织</div>
      <div v-else-if="type === 3">合并组织</div>
      <div v-else-if="type === 4">启用组织</div>
      <div v-else-if="type === 5">停用组织</div>
    </template>
    <div v-if="type === 1 || type === 3">
      <div v-if="type === 1">
        <div class="tip">
          <a-space direction="vertical" fill wrap>
            <div>
              1、请选择需要移动的目标，原组织下的所有员工都将并入到新的组织，员工岗位按企业实际情况处理。
            </div>
            <div style="word-wrap: break-word">
              2、移动后，被移动的组织下的直属在职员工所属部门将自动更新为合并后的部门，同时员工的考勤，薪资，绩效、审批、合同等相关权
              限会发生变化或失效，请谨慎操作。
            </div>
          </a-space>
        </div>
        <section>
          <a-form :model="formData" auto-label-width :rules="rules">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item field="" label="当前组织" show-colon>
                  <span>
                    {{ selectedTableData.map((el: any) => el.name).join(',') }}
                  </span>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="" label="当前组织员工数" show-colon>
                  {{ selectedTableData.map((el: any) => el.onJob).join(',') }}
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="组织移动到" show-colon field="newId">
                  <a-select
                    ref="selectRef"
                    v-model="formData.newId"
                    placeholder="请选择组织"
                    @change="onSelect"
                  >
                    <a-option
                      v-for="item in list.filter((el: any) => !selectedOrganizationIds.includes(el.id))"
                      :key="item.id"
                      :value="item.id"
                      :data-onJob="item.onJob"
                      class="aa"
                    >
                      {{ item.name }}
                    </a-option>
                  </a-select>
                  <template #extra>
                    <div>组织员工数：{{ selectedOrganizationNum }}</div>
                  </template>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </section>
      </div>
      <div v-else>
        <div class="tip">
          <a-space direction="vertical" fill wrap>
            <div>
              1、请选择需要合并的目标，原组织下的所有员工都将并入到新的组织，员工岗位按企业实际情况处理。
            </div>
            <div style="word-wrap: break-word">
              2、合并后，被合并的组织下的直属在职员工所属部门将自动更新为合并后的部门，同时员工的考勤，薪资，绩效、审批、合同等相关权
              限会发生变化或失效，请谨慎操作。
            </div>
          </a-space>
        </div>
        <section>
          <a-form :model="formData" auto-label-width>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item field="" label="当前组织" show-colon>
                  <span>
                    {{ selectedTableData.map((el: any) => el.name).join(',') }}
                  </span>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="" label="当前组织员工数" show-colon>
                  {{ selectedTableData.map((el: any) => el.onJob).join(',') }}
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="组织合并到" show-colon field="newId">
                  <a-select
                    ref="selectRef"
                    v-model="formData.newId"
                    placeholder="请选择组织"
                    @change="onSelect"
                  >
                    <a-option
                      v-for="item in list.filter((el: any) => !selectedOrganizationIds.includes(el.id))"
                      :key="item.id"
                      :value="item.id"
                    >
                      {{ item.name }}
                    </a-option>
                  </a-select>
                  <template #extra>
                    <div>组织员工数：{{ selectedOrganizationNum }}</div>
                  </template>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="newName" label="新组织名称" show-colon>
                  <a-input v-model="formData.newName"></a-input>
                  <template #extra>
                    <div>合并后组织员工数：{{ mergerNum }}</div>
                  </template>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </section>
      </div>
    </div>

    <div v-if="type === 2 || type === 4 || type === 5">
      <div>
        {{
          type === 2
            ? '是否删除该组织？'
            : type === 4
            ? '是否启用选中的组织？'
            : '是否停用选中的组织？'
        }}
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    list: any; // 传进来的所有组织数据
    selectedTableData: any; // 传进来的所有在表格选中要合并或者移动组织的数据
    /* 
      1 移动
      2 删除
      3 合并
      4 启用
      5 停用
    */
    type: number;
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible', 'organizationEmit']);

const rules = {
  newName: [
    {
      required: true,
      message: '请输入新组织名称'
    }
  ],
  newId: [
    {
      required: true,
      message: '请选择'
    }
  ]
};

let formData = ref({
  newId: undefined, // 储存选中的组织id
  newName: '' // 储存选中组织的名称
});

let selectedOrganizationNum = ref(undefined); // 选中组织的组织员工数
let mergerNum = ref(undefined); // 合并后的员工数
let selectedOrganizationIds = ref([]);
watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      formData.value = {
        newId: undefined,
        newName: ''
      };
      selectedOrganizationIds.value = props.selectedTableData.map(
        (el: any) => el.id
      );
    }
  }
);

let selectRef = ref(); // 储存下拉框ref
const onSelect = () => {
  nextTick(() => {
    formData.value.newName = selectRef.value.$el.parentElement.innerText;
    selectedOrganizationNum.value = props.list.find(
      (el: any) => el.id === formData.value.newId
    ).onJob;

    // 计算合并后的组织人数
    mergerNum.value = props.selectedTableData
      .map((el: any) => el.onJob)
      .reduce((a: any, b: any) => a + b, selectedOrganizationNum.value);
  });
};

// 保存
const handleOk = () => {
  emit('organizationEmit', formData.value, props.type);
  emit('update:visible', false);
};

// 取消
const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<style scoped lang="less">
.tip {
  padding: 10px;
  background-color: #fff7f0;
  border: 1px solid #f5b45b;
  border-radius: 10px;
  margin-bottom: 20px;
}
.content {
  .dept {
    :deep(.arco-form-item-content-wrapper) {
      width: 200%;
    }
  }
}
</style>
